<template>
  <view class="search-container">
    <view class="search-box">
      <!-- 基本用法 -->
      <uni-search-bar :radius="100" @input="input" cancelButton="none"></uni-search-bar>
    </view>
    <!-- 搜索结果渲染 -->
    <view class="sugg-list" v-if="goodsList.length>0">
      <view v-for="item in goodsList" :key="item.goods_id" class="sugg-item">
        <text @click="goTogoodsDetail(item.goods_id)" class="goods-name">{{item.goods_name}}</text>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history-box" v-else>
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" @click="clear" />
      </view>
      <view class="history-list">
        <uni-tag v-for="item in historyList" :key="item" :text="item" @click="goToGoodsList(item)" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        goodsList: [],
        historyList: []
      }
    },
    onLoad() {
      this.historyList = uni.getStorageSync('history') || []
    },
    methods: {
      input(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.getGoodsListData(e)
        }, 1000)
      },
      async getGoodsListData(keyword) {
        if (keyword.length === 0) return
        const res = await uni.$request({
          url: 'goods/qsearch',
          data: {
            query: keyword
          }
        })
        if (res.meta.status === 200) {
          this.goodsList = res.message
        }
        // 调用抽取的方法
        this.saveHistory(keyword)
      },
      saveHistory(keyword) {
        // 判断输入的关键词是否存在 存在就干掉
        const index = this.historyList.findIndex(item => item === keyword)
        if (index > -1) {
          this.historyList.splice(index, 1)
        }
        // 把关键词存到historyList中
        this.historyList.unshift(keyword)
        // 把数据保存到本地中
        uni.setStorageSync('history', this.historyList)
      },
      // 清空搜索记录
      clear() {
        this.historyList = [],
          uni.setStorageSync('history', [])
      },
      goTogoodsDetail(id) {
        uni.navigateTo({
          url: '/subpkg/goods-detail/index?id=' + id
        })
      },
      goToGoodsList(query){
        uni.navigateTo({ url: '/subpkg/goods-list/index?query='+query })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .search-container {
    .search-box {
      position: sticky;
      top: 0;
      z-index: 999;

      ::v-deep .uni-searchbar {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        position: relative;
        padding: 16rpx;
        /* 将默认的 #FFFFFF 改为 #C00000 */
        background-color: #c00000;
      }
    }

    .history-box {
      padding: 0 5px;


      .history-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        font-size: 13px;
        border-bottom: 1px solid #efefef;
      }


      .history-list {
        display: flex;
        flex-wrap: wrap;


        ::v-deep .uni-tag {
          margin-top: 5px;
          margin-right: 5px;
        }
      }
    }

    .sugg-list {
      padding: 0 5px;


      .sugg-item {
        font-size: 12px;
        padding: 13px 0;
        border-bottom: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: space-between;


        .goods-name {
          // 文字不允许换行（单行文本）
          white-space: nowrap;
          // 溢出部分隐藏
          overflow: hidden;
          // 文本溢出后，使用 ... 代替
          text-overflow: ellipsis;
          margin-right: 3px;
        }
      }
    }
  }
</style>